<!DOCTYPE html>
<html lang="zh-CN" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="layout/default">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <script type="text/javascript" th:src="@{/assets/plugins/jquery-treetable/jquery.treetable.js}"></script>
    <script>
        $(document).ready(function () {
            $("#treeTable").treetable();
        });
        function updateSort() {
            App.blockUI(window, true);
            $("#menuListForm").attr("action", "[[@{/sys/menu/updateSort}]]");
            $("#menuListForm").submit();
        }
    </script>
</head>
<body>
<div layout:fragment="content" th:remove="tag">

    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN PAGE TITLE & BREADCRUMB-->
            <h3 class="page-title">
                菜单管理
                <small>维护系统菜单</small>
            </h3>
            <ul class="page-breadcrumb breadcrumb">
<!--                 <li class="btn-group"> -->
<!--                     <button type="button" class="btn blue dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" -->
<!--                             data-delay="1000" data-close-others="true"> -->
<!--                         <span>跳转</span> <i class="fa fa-angle-down"></i> -->
<!--                     </button> -->
<!--                     <ul class="dropdown-menu pull-right" role="menu"> -->
<!--                         <li><a th:href="@{/sys/menu}">菜单列表</a></li> -->
<!--                         <li><a th:href="@{/sys/menu/form}">菜单添加</a></li> -->
<!--                     </ul> -->
<!--                 </li> -->
                <li>
                    <i class="fa fa-home"></i>
                    <a th:href="@{/}">首页</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">系统设置</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li><a href="#">菜单管理</a></li>
            </ul>
            <!-- END PAGE TITLE & BREADCRUMB-->

        </div>
    </div>


    <div class="row profile">
        <div class="col-md-12">
            <!--BEGIN TABS-->
            <div class="tabbable tabbable-custom tabbable-full-width">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#menu_tab_1_1">菜单列表</a></li>
                    <li><a th:href="@{/sys/menu/form}">菜单添加</a></li>
                </ul>
                <div class="tab-content">

                    <div class="tab-pane active" id="menu_tab_1_1">
                        <div class="row">
                            <div class="col-md-12">
                                <form id="menuListForm" method="post">
                                    <table id="treeTable" class="table table-striped table-bordered table-advance table-hover">
                                        <thead>
                                        <tr>
                                            <th>名称</th>
                                            <th>链接</th>
                                            <th style="text-align:center;">排序</th>
                                            <th>可见</th>
                                            <th>权限标识</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="menu : ${list}"
                                            th:attr="data-tt-id=${menu.id}"
                                            th:attrappend="data-tt-parent-id=${menu.parent.id}">
                                            <td><i th:if="${not #strings.isEmpty(menu.icon)}"
                                                   th:classappend="${menu.icon}"></i>
                                                <a th:href="@{/sys/menu/form(id=${menu.id})}" th:text="${menu.name}">name</a>
                                            </td>
                                            <td th:text="${menu.href}">href</td>
                                            <td style="text-align:center;">
                                                <input type="hidden" name="ids" th:value="${menu.id}"/>
                                                <input name="sorts" type="text" th:value="${menu.sort}"
                                                       class="form-control input-sm"
                                                       style="margin:0;padding:0;text-align:center;width:50px;"/>
                                            </td>
                                            <td th:text="${#strings.equals(menu.isShow, '1')} ? '显示' : '隐藏'">isShow</td>
                                            <td th:text="${menu.permission}">permission</td>
                                            <td>
                                                <a th:href="@{/sys/menu/form(id=${menu.id})}"
                                                   class="btn default btn-xs blue-stripe">修改</a>
                                                <a th:href="@{/sys/menu/delete(id=${menu.id})}"
                                                   onclick="return App.confirm('要删除该菜单及所有子菜单项吗？', this.href)"
                                                   class="btn default btn-xs red-stripe">删除</a>
                                                <a th:href="@{/sys/menu/form(parent.id=${menu.id})}"
                                                   class="btn default btn-xs green-stripe">添加下级菜单</a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <div class="form-actions pagination-left">
                                        <input id="btnSubmit" class="btn green" type="button" value="保存排序"
                                               onclick="updateSort();"/>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


</div>


</body>
</html>
